<template>
  <div class="mainViewPort" ref="mainViewPort">
    <!-- 导航视口 -->
    <HeadTop></HeadTop>
    <transition name="el-fade-in-linear">
      <router-view :key="$route.path"></router-view>
    </transition>
    <BottomModel class="bottomModel" ref="bottomModel"></BottomModel>
  </div>
</template>

<script>
import HeadTop from "@/components/head-top.vue";
import BottomModel from "@/components/bottom-model.vue";
export default {
  components: { HeadTop, BottomModel },
  mounted() {
    this.$nextTick(() => {
      const bottomDom = this.$refs.bottomModel.$el;
      this.$refs.mainViewPort.style["padding-bottom"] =
        bottomDom.offsetHeight + "px";
    });
  }
};
</script>

<style scoped lang="scss">
.mainViewPort {
  position: relative;
  min-height: inherit;
  min-width: 1300px;
  .bottomModel {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
}
.el-fade-in-linear-enter-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
